<template>
  <div :class="`list-b-${margin}`" v-if="data">
    <div class="comBox" v-for="row in data">
      <div class="comBox-head" :class="{
        'bg-color-hover': isBg
      }">
        <div class="comBox-head-l" :class="`list-r-${margin}`">
          <slot name="headLeft" :row="row" />
        </div>
        <div class="comBox-head-r" :class="`list-r-${margin}`">
          <slot name="headRight" :row="row" />
        </div>
      </div>
      <div class="comBox-main" :style="{
        padding: proxy.$size(padding)
      }">
        <slot :row="row" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, getCurrentInstance, onUnmounted } from 'vue';
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: object;
    margin?: number;
    padding?: number;
    isBg?: boolean;
  }>(),
  {
    margin: 12,
    padding: 12,

  },
);

onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
